<template>
  <div class="container">
    <div class="version-info">
      <h2>版本信息</h2>
      <div class="version-item">
        <h3>Helm 版本</h3>
        <div v-if="helmVersion.loading">加载中...</div>
        <div v-else-if="helmVersion.data.success" class="version-success">
          <div class="version-field">
            <span class="field-label">版本号:</span>
            <span class="field-value">{{ helmVersion.data.data.version }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">Git提交:</span>
            <span class="field-value">{{ helmVersion.data.data.git_commit }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">Git树状态:</span>
            <span class="field-value">{{ helmVersion.data.data.git_tree_state }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">Go版本:</span>
            <span class="field-value">{{ helmVersion.data.data.go_version }}</span>
          </div>
        </div>
        <div v-else-if="helmVersion.data.error" class="version-error">
          {{ helmVersion.data.error }}
        </div>
        <a-button type="primary" size="mini" @click="fetchHelmVersion" :disabled="helmVersion.loading">
          {{ helmVersion.loading ? '查询中...' : '刷新' }}
        </a-button>
      </div>
      
      <div class="version-item">
        <h3>Kubectl 版本</h3>
        <div v-if="kubectlVersion.loading">加载中...</div>
        <div v-else-if="kubectlVersion.data.success" class="version-success">
          <h4>客户端版本</h4>
          <div class="version-field">
            <span class="field-label">Git版本:</span>
            <span class="field-value">{{ kubectlVersion.data.data.client_version.git_version }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">Git提交:</span>
            <span class="field-value">{{ kubectlVersion.data.data.client_version.git_commit }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">Git树状态:</span>
            <span class="field-value">{{ kubectlVersion.data.data.client_version.git_tree_state }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">构建日期:</span>
            <span class="field-value">{{ kubectlVersion.data.data.client_version.build_date }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">Go版本:</span>
            <span class="field-value">{{ kubectlVersion.data.data.client_version.go_version }}</span>
          </div>
          <div class="version-field">
            <span class="field-label">平台:</span>
            <span class="field-value">{{ kubectlVersion.data.data.client_version.platform }}</span>
          </div>
          
          <div v-if="kubectlVersion.data.data.server_version">
            <h4>服务器版本</h4>
            <div class="version-field">
              <span class="field-label">Git版本:</span>
              <span class="field-value">{{ kubectlVersion.data.data.server_version.git_version }}</span>
            </div>
            <div class="version-field">
              <span class="field-label">Git提交:</span>
              <span class="field-value">{{ kubectlVersion.data.data.server_version.git_commit }}</span>
            </div>
            <div class="version-field">
              <span class="field-label">Git树状态:</span>
              <span class="field-value">{{ kubectlVersion.data.data.server_version.git_tree_state }}</span>
            </div>
            <div class="version-field">
              <span class="field-label">构建日期:</span>
              <span class="field-value">{{ kubectlVersion.data.data.server_version.build_date }}</span>
            </div>
            <div class="version-field">
              <span class="field-label">Go版本:</span>
              <span class="field-value">{{ kubectlVersion.data.data.server_version.go_version }}</span>
            </div>
            <div class="version-field">
              <span class="field-label">平台:</span>
              <span class="field-value">{{ kubectlVersion.data.data.server_version.platform }}</span>
            </div>
          </div>
        </div>
        <div v-else-if="kubectlVersion.data.error" class="version-error">
          {{ kubectlVersion.data.error }}
        </div>
        <a-button type="primary" size="mini"  @click="fetchKubectlVersion" :disabled="kubectlVersion.loading">
          {{ kubectlVersion.loading ? '查询中...' : '刷新' }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {invoke} from '@tauri-apps/api/core'

// 定义 Helm 版本详细信息结构
interface HelmVersionInfo {
  version: string
  git_commit: string
  git_tree_state: string
  go_version: string
}

// 定义 Helm 版本信息响应结构
interface HelmVersionResponse {
  success: boolean
  data: HelmVersionInfo
  error: string | null
}

// 定义版本详情
interface VersionDetail {
  major: string
  minor: string
  git_version: string
  git_commit: string
  git_tree_state: string
  build_date: string
  go_version: string
  compiler: string
  platform: string
}

// 定义 Kubectl 版本详细信息结构
interface KubectlVersionInfo {
  client_version: VersionDetail
  server_version: VersionDetail | null
}

// 定义 Kubectl 版本信息响应结构
interface KubectlVersionResponse {
  success: boolean
  data: KubectlVersionInfo
  error: string | null
}

// Helm 版本状态
const helmVersion = ref<{
  loading: boolean
  data: HelmVersionResponse
}>({
  loading: false,
  data: { 
    success: false, 
    data: { 
      version: '', 
      git_commit: '', 
      git_tree_state: '', 
      go_version: '' 
    }, 
    error: null 
  }
})

// Kubectl 版本状态
const kubectlVersion = ref<{
  loading: boolean
  data: KubectlVersionResponse
}>({
  loading: false,
  data: { 
    success: false, 
    data: { 
      client_version: {
        major: '',
        minor: '',
        git_version: '',
        git_commit: '',
        git_tree_state: '',
        build_date: '',
        go_version: '',
        compiler: '',
        platform: ''
      },
      server_version: null
    }, 
    error: null 
  }
})

// 获取 Helm 版本信息
const fetchHelmVersion = async () => {
  helmVersion.value.loading = true
  try {
    helmVersion.value.data = await invoke('get_helm_version')
  } catch (error) {
    helmVersion.value.data = { 
      success: false, 
      data: { 
        version: '', 
        git_commit: '', 
        git_tree_state: '', 
        go_version: '' 
      }, 
      error: error instanceof Error ? error.message : '未知错误' 
    }
  } finally {
    helmVersion.value.loading = false
  }
}

// 获取 Kubectl 版本信息
const fetchKubectlVersion = async () => {
  kubectlVersion.value.loading = true
  try {
    kubectlVersion.value.data = await invoke('get_kubectl_version')
  } catch (error) {
    kubectlVersion.value.data = { 
      success: false, 
      data: { 
        client_version: {
          major: '',
          minor: '',
          git_version: '',
          git_commit: '',
          git_tree_state: '',
          build_date: '',
          go_version: '',
          compiler: '',
          platform: ''
        },
        server_version: null
      }, 
      error: error instanceof Error ? error.message : '未知错误' 
    }
  } finally {
    kubectlVersion.value.loading = false
  }
}

// 组件挂载时获取版本信息
onMounted(() => {
  fetchHelmVersion()
  fetchKubectlVersion()
})
</script>

<style scoped lang="scss">
.container {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-wrap: nowrap;
  //background-color: #0b0b0b;
  height: calc(100vh - 48px);
  padding: 20px;
  overflow-y: auto;
}

.version-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.version-info h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.version-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: var(--theme-bg);
  border-radius: 8px;
}

.version-item h3 {
  margin: 0;
  font-size: 18px;
}

.version-item h4 {
  margin: 12px 0 8px 0;
  font-size: 16px;
  color: #a0aec0;
}

.version-success {
  padding: 12px;
  border-radius: 4px;
}

.version-field {
  display: flex;
  margin-bottom: 8px;
}

.field-label {
  font-weight: bold;
  width: 120px;
  flex-shrink: 0;
}

.field-value {
  flex: 1;
  word-break: break-all;
}

.version-error {
  color: #e53e3e;
  background-color: #2d0f0f;
  padding: 12px;
  border-radius: 4px;
}

.arco-btn {
  align-self: flex-start;
  padding: 8px 16px;
  background-color: var(--theme-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.version-item pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: monospace;
  font-size: 14px;
}
</style>